<template>
	<view>
		<!-- :bgColor="'bg-'+theme" -->
		<cu-custom :bgColor="'bg-red'" :isBack="true" >
			<block slot="backText"></block>
			
			<block slot="content"><text>{{title}}</text></block>
		</cu-custom>
		<view class="whole-box">
			<scroll-view scroll-x class=" nav text-center" >
				<view class="cu-item my-cu-item" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cu-item-active text-'+theme:'text-white'"
				 @tap="tabSelect" :data-id="index">
					<view class="">{{item.title}}</view>
				</view>
			</scroll-view>
			<view class="list">
				
				<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
					<block v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
						<view  class="list-item" v-if="item.type == 33">
							<view class="list_top">
								<view>达标情况：{{bonus_list[bonus_index]}}</view>
							</view>
							<view class="list_left">
								<view>当前级别：{{level.name}}</view>
								<view>本周业绩：{{bonus_order}}</view>
								<view>预计收益：{{wek_order}}</view>
							</view>
							<view class="list_rigth">
								<view>持有分红权：{{bonus}}</view>
								<view>周释放分红权：{{wek_bonus}}</view>
								<view>累计收益：{{send_order}}</view>
							</view>
						</view>
						<view  class="list-item" v-if="item.type == 2">
							<view  class="list_top_yj">
								<view>达标情况：{{bonus_list[px_index]}}</view>
							</view>
							<view  class="list_left_yj">
								<view>当前级别：{{level_gl?level_gl.name:'-'}}</view>
								<view>预期最多获得积分：{{g_count}}</view>
								<view>当前累计获得积分：{{gx_order}}</view>
							</view>
						</view>
						<view  class="list-item" v-if="item.type == 0">
							<view  class="list_top_yj" v-if="fx_level.id > 1">
								<view>达标情况：{{bonus_list[fx_index]}}</view>
							</view>
							<view  class="list_left_yj" v-if="fx_level.id > 1">
								<view>当前级别：{{level_name}}</view>
								<view>月业绩：{{fx_order}}</view>
								<view>业绩点数：{{fx_bonus}}</view>
							</view>
							<view  v-else>
								<view>当前级别：{{level_name}}</view>
							</view>
						</view>
						<view v-if="item.list != ''" v-for="(group_buy ,i) in item.list" :key="i">
							<view  class="list-item" v-if="item.type == 33">
									<view  class="goods-item">
										<view class="goods_info">
											<view class="my-data-box-content">
												<view class="left-box">
													<view>
														<view class="title" >领导收益(第{{group_buy.send_index}}期)</view>
													</view>
													<view class="time">{{$common.timeFormat(group_buy.created_at)}}</view>
												</view>
												<view class="num up" >{{group_buy.per_weight_integral}}</view>
											</view>
										</view>
									</view>
							</view>
							<view v-if="item.type == 2" class="group_buy" style="height: 100px;">
								<view  class="goods-item">
									<view class="goods_info">
										<view class="my-data-box-content">
											<view class="left-box">
												<view>
													<view class="title" >{{group_buy.remark}}<text v-if="group_buy.from_member_id>0">(ID:{{group_buy.from_member_id}})</text></view>
												</view>
												<view class="time">{{$common.timeFormat(group_buy.created_at)}}</view>
											</view>
											<view class="num up" >{{group_buy.num}}</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="item.type == 1" class="group_buy" style="height: 100px;">
								<view  class="goods-item">
									<view class="goods_info">
										<view class="my-data-box-content">
											<view class="left-box">
												<view>
													<view class="title" >{{group_buy.remark}}<text v-if="group_buy.from_member_id>0">(ID:{{group_buy.from_member_id}})</text></view>
												</view>
												<view class="time">{{$common.timeFormat(group_buy.created_at)}}</view>
											</view>
											<view class="num up" >{{group_buy.num}}</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="item.type == 0" class="group_buy" style="height: 100px;">
								<view  class="goods-item">
									<view class="goods_info">
										<view class="my-data-box-content">
											<view class="left-box">
												<view>
													<view class="title" >业绩收益(第{{group_buy.send_index}}期)</view>
												</view>
												<view class="time">{{$common.timeFormat(group_buy.created_at)}}</view>
											</view>
											<view class="num up" >{{group_buy.pay_num}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-load margin-center text-white" :class="item.loading?'loading':'over'"></view>
					</block>
				</scroll-view>
			</view>	
		</view>
		<Navbar ref="navbar" PageCur="category"></Navbar>
	</view>	
</template>

<script>
	import Navbar from '@/components/default/Navbar.vue'
	export default {
		components: {
			Navbar
		},
		mounted() {
			
		},
		data() {
			return {
				theme: this.$config.THEME(),
				title: '收益详情',
				TabCur: 0,
				list:[],
				page:1,
				sCur:1,
				bonus:0,
				bonus_order:0,
				bonus_list:['未达标','已达标'],
				bonus_index:0,
				wek_bonus:0,
				wek_order:0,
				send_order:0,
				fx_index:0,
				px_index:0,
				gx_order:0,
				g_count:0,
				level_name:'',
				fx_order:0,
				fx_bonus:0,
				level:[],
				fx_level:[],
				level_gl:[],
				listObj: [
					{
						title: '直推收益',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 1
					},
					{
						title: '管理收益',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 2
					},
					{
						title: '领导收益',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 33
					},
					
					// {
					// 	title: '等待开团',
					// 	title2: '待兑换',
					// 	list: [],
					// 	hasMore: true,
					// 	loading: false,
					// 	page: 1,
					// 	type: -3
					// },
					// {
					// 	title: '开团成功',
					// 	title2: '待兑换',
					// 	list: [],
					// 	hasMore: true,
					// 	loading: false,
					// 	page: 1,
					// 	type: -1
					// },
					{
						title: '业绩奖励',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 0
					},
					// {
					// 	title: '秒杀成功',
					// 	title2: '已兑换',
					// 	list: [],
					// 	hasMore: true,
					// 	loading: false,
					// 	page: 1,
					// 	type: 1
					// }
				],
				
				scrollHeight: 100,
			}
		},
		onLoad(options) {
			if (options.status)
				this.TabCur = parseInt(options.status)
				
				this.listObj[this.TabCur].list = []
				this.listObj[this.TabCur].hasMore = true
				this.listObj[this.TabCur].page = 1
				this.listObj[this.TabCur].loading = false
				if(this.listObj[this.TabCur].type == 33){
					this.getListInfo()
				}else if(this.listObj[this.TabCur].type == 0){
					this.getListorder()
				}else{
					this.getList(this.TabCur)
				}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$nextTick((r) => {
					// uni.startPullDownRefresh({})
					
				})
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.my-cu-item').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					_this.scrollHeight = winHeight - res[0].bottom
				})
			},
			tabSelect(e) {
				
				this.getScrollH()
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.listObj[this.TabCur].list = []
					this.listObj[this.TabCur].hasMore = true
					this.listObj[this.TabCur].page = 1
					this.listObj[this.TabCur].loading = false
					// this.getList(this.TabCur)
					console.log('this.TabCur',this.TabCur)
					if(this.listObj[this.TabCur].type == 33){
						this.getListInfo()
					}else if(this.listObj[this.TabCur].type == 0){
						this.getListorder()
					}else if(this.listObj[this.TabCur].type == 2){
						this.getglorder()
					}else{
						this.getList(this.TabCur)
					}
				}
			},
			getglorder(){
				let index=this.TabCur
				let obj = this.listObj[index]
					let param = {
						page: obj.page,
					}
				this.$http
					.get('group_gl_log', param)
					.then((response) => {
						let list = obj.list
						console.log('response.data',response.data)
						let px_index=response.data.data.px_index
						if (response.data.data.p_list.length > 0) {
							list = list.concat(response.data.data.p_list)
						} else {
							this.listObj[index].hasMore = false
						}
						if(px_index>0){
							this.px_index=px_index
							
						}else{
							this.px_index=0
						}
						this.level_gl=response.data.data.level
						this.g_count=response.data.data.p_count
						this.gx_order=response.data.data.totalmoney
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						
						console.log('list', list)
						this.getScrollH()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return
			
				this.listObj[index].loading = true
				let params = {
					page: obj.page,
					type: obj.type,
				}
				this.$http
					.get('marketing_zt_log', params)
					.then((response) => {
						
						let list = obj.list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
						} else {
							this.listObj[index].hasMore = false
						}
						
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						console.log(this.listObj[index].list)
						this.getScrollH()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getMore() {
				// this.getList(this.TabCur)
				if(this.listObj[this.TabCur].type == 33){
					this.getListInfo()
				}else if(this.listObj[this.TabCur].type == 0){
						this.getListorder()
				}else if(this.listObj[this.TabCur].type == 2){
						this.getglorder()
				}else{
					this.getList(this.TabCur)
				}
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/marketing/wholesale?id=" + id
				})
			},
			getListInfo() {
					let index=this.TabCur
					let obj = this.listObj[index]
						let param = {
							page: obj.page,
						}
					this.$http
						.get('group_lg_log', param)
						.then((response) => {
							let list = obj.list
							console.log('response.data',response.data)
							let is_dabiao=response.data.data.is_dabiao
							if (response.data.data.p_list.length > 0) {
								list = list.concat(response.data.data.p_list)
							} else {
								this.listObj[index].hasMore = false
							}
							if(is_dabiao>0){
								this.bonus_index=is_dabiao
							}
							this.wek_bonus=response.data.data.set_num
							this.bonus_order=response.data.data.totalmoney
							this.level=response.data.data.level
							this.wek_order=response.data.data.BonusWeight.send_num
							this.send_order=response.data.data.BonusWeight.send_money
							this.bonus=response.data.data.BonusWeight.total
							
							this.listObj[index].list = list
							this.listObj[index].loading = false
							this.listObj[index].page++
							
							console.log('list', list)
							this.getScrollH()
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
		},
			getListorder(){
				let index=this.TabCur
				let obj = this.listObj[index]
					let param = {
						page: obj.page,
					}
				this.$http
					.get('group_dl_log', param)
					.then((response) => {
						let list = obj.list
						console.log('response.data',response.data)
						let is_fx=response.data.data.is_fx
						if (response.data.data.p_list.length > 0) {
							list = list.concat(response.data.data.p_list)
						} else {
							this.listObj[index].hasMore = false
						}
						if(is_fx>0){
							this.fx_index=is_fx
							
						}else{
							this.fx_index=0
						}
						this.level_name=response.data.data.level_name
						this.fx_bonus=response.data.data.send_yj
						this.fx_order=response.data.data.totalmoney
						this.fx_level=response.data.data.level
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						
						console.log('list', list)
						this.getScrollH()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			console.log(this.TabCur)
			if(this.TabCur == 2){
				this.getListInfo()
			}else if(this.TabCur == 3){
				this.getListorder()
			}else if(this.TabCur == 1){
				this.getglorder()
			}else{
				this.getList(this.TabCur)
			}
		},
		
		},
	}
</script>

<style>
	.cu-item{
		height: 30px;
		width: 85px;
		line-height: 29px;
		border-radius: 15px;
		display: inline-block;
		margin-bottom: 10px;
	}
	.cu-item-active{
		background-color: #ffffff;
		color: #1A181E!important;
	}
	.whole-box{
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px);
		padding: 12px 0;
		/* position: fixed; */
		width: 100%;
	}
	.goods_info .my-data-box-content{
		width: 690rpx;
		height: 160rpx;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}
	
	.my-data-box-content .left-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		width: 	440rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.left-box .time{
		margin-top: 16rpx;
		font-size: 34rpx;
		color: #E9CFA4;
	}
	.my-data-box-content .num{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #3C3A3A;
	}
	.my-data-box-content .num.up{
		color: #000000;
	}
	.item .num.down{
		color: #A21818;
	}
	.list_top{
		width: 50%;
		height: 240rpx;
		font-weight: bold;
		font-size: 15px;
		color:#000;
	}
	.list_left{
		width: 50%;
		/* height: 200rpx; */
		font-weight: bold;
		font-size: 15px;
		color:#000;
		margin-top: -180rpx;
		
	}
	.list_top_yj{
		/* width: 50%; */
		height: 240rpx;
		font-weight: bold;
		font-size: 15px;
		color:#000;
	}
	.list_left_yj{
		/* height: 200rpx; */
		/* width: 50%; */
		/* height: 200rpx; */
		font-weight: bold;
		font-size: 15px;
		color:#000;
		margin-top: -180rpx;
	}
	.list_rigth{
		width: 50%;
		position: absolute;
		display: flex;
		flex-direction: column;
		float: right;
		font-weight: bold;
		font-size: 15px;
		color:#000;
		margin-left: 380rpx;
		margin-top: -120rpx;
	}
	.my-cu-item{
		/* height: 100rpx;
		display: inline-block;
		line-height: 50rpx;
		margin: 0 20rpx;
		padding: 30rpx 10rpx; */
	}
	.group_buy{
		width: 95%;
		height: 240rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.group_buy .thumb{
		width: 120rpx;
		height: 120rpx;
		border-radius: 6rpx;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.group_buy .info-box{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-items: center; */
	}
	.info-box .title{
		width: 520rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.info-box .spec-num{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info-box .spec-num .spec{
		font-size: 24rpx;
		color: #000000;
	}
	.info-box .spec-num .num{
		font-size: 24rpx;
		color: #000000;
		opacity: 0.77;
	}
	.info-box .price{
		font-size: 24rpx;
		color: #000000;
	}
	.info-box .time{
		font-size: 24rpx;
		color: #5C5B5B;
	}
</style>

<style>
	.list-item{
		padding: 20rpx;
		background-color: #FFFFFF;
		/* margin: 10rpx 0; */
		width: 95%;
		height: 240rpx;
		margin: auto;
		margin-top: 20rpx;
		/* padding: 30rpx 40rpx; */
		/* background-color: #FFFFFF; */
		border-radius: 30rpx;
		/* display: flex; */
		justify-content: space-between;
		align-items: center;
	}
	.list-item .goods-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods-item .goods-thumb{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
	}
	.goods-thumb .thumb{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
	}
	.goods-thumb .factory{
		position: absolute;
		top: 6rpx;
		left: 0;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 24rpx;
		width: 120rpx;
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
	.goods-thumb .sold-out{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
		color: #ffffff;
		font-size: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}
	
	.goods-item .goods_info{
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_info .status{
		width: 110rpx;
		height: 40rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #F33434;
	}
	.goods_info .title-line{
		/* margin-top: 20rpx; */
		display: flex;
		align-items: center;
	}
	.title-line .attr{
		flex-shrink: 0;
		/* padding: 4rpx 20rpx; */
		border-radius: 20rpx;
		background-color: #FFEE8B;
		color: #333333;
		font-size: 20rpx;
		height: 36rpx;
		width: 110rpx;
		text-align: center;
	}
	.title-line .title{
		margin-left: 4rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
	}
	.goods_info .price{
		font-size: 24rpx;
		color: #F32F2F;
	}
	.goods_info .time{
		font-size: 24rpx;
		color: #151515;
	}
	.goods_info .number{
		text-align: right;
		font-size: 30rpx;
		color: #000000;
	}
	.goods_info .price-action{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		
	.list-item .list-title{
		margin-top: 30rpx;
		color: #000000;
		font-size: 30rpx;
	}
	.list-item .join-box{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
	}
	.join-box .member-box{
		margin-top: 40rpx;
		width: 92rpx;
		height: 92rpx;
		margin-right: 10rpx;
		position: relative;
	}
	.join-box .member-box:nth-child(7n){
		margin-right: 0;
	}
	.member-box .avatar{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 50%;
	}
	.member-box .prize{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
	.member-box .num{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		transform: rotate(40deg);
		font-size: 24rpx;
		color: #FFFFFF;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
	
	.price-side .price-line .price{
		font-size: 30rpx;
		color: #F32F2F;
		font-weight: bold;
		margin-right: 30rpx;
	}
	.price-side .price-line .market-price{
		font-size: 24rpx;
		color: #B1B1B1;
		text-decoration: line-through;
	}
	.price-side .award{
		margin-top: 10rpx;
		padding: 4rpx 0;
		/* width: 160rpx; */
		text-align: center;
		border-radius: 4rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #FC2B5D;
	}
	.price-action .action{
		width: 110rpx;
		height: 40rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #F33434;
	}
</style>
